<template>
  <transition name="fade" appear>
    <div class="to_room" v-drag>
      <div class="title">
        <span>进入房间</span>
        <off-btn class="off" @off="$emit('off')"></off-btn>
      </div>
      <div class="info" @mousedown.stop>
        <div class="room_id">
          <span>房间号：</span><span>{{RoomInfo.chatid}}</span>
        </div>
        <div class="room_name">
          <span>房主：</span><span>{{RoomInfo.name}}</span>
        </div>
        <div class="room_title">
          <span>标题：</span><span>{{RoomInfo.title}}</span>
        </div>
        <div class="room_password" v-if="RoomInfo.password">
          <span>密码：</span>
          <input v-model="password" type="text">
        </div>
        <button class="btn" @click="toRoom(RoomInfo.chatid)">进入房间</button>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapActions } from 'vuex';
import offBtn from '../info/offBtn.vue'
export default {
  name: 'Toroom',

  data() {
    return {
      password: null
    };
  },

  props: {
    // 要进入房间的信息
    RoomInfo: Object
  },

  mounted() {
    
  },

  methods: {
    // 进入房间
    toRoom(id){
      if(this.RoomInfo.password){
        this.$api.passwordRoom({id,password:this.password}).then(res => {
          if(res == 1){
            const routeData = this.$router.resolve({
              path: '/Room',
              query: {
                id,
                password: this.password
              }
            })
            window.open(routeData.href, '_blank')
            this.$emit('off')
          }else{
            this.showHint({title: '密码错误!',isFlag:false})
          }
        })
      }else{
        const routeData = this.$router.resolve({
          path: '/Room',
          query: {id}
        })
        window.open(routeData.href, '_blank')
        this.$emit('off')
      }
    },
    ...mapActions(['showHint'])
  },

  components:{
    offBtn
  }
};
</script>

<style scoped>
.to_room{
  width: 400px;
  background-color: white;
  border: 1px solid gray;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 0.8rem;
}
.to_room .title{
  height: 30px;
  background-color: gray;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.to_room .title .off{
  position: absolute;
  right: 10px;
}
.to_room .info{
  height: 200px;
  background-image: url('../../assets/image/toroomBG.jpg');
  background-size: contain;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 20px;
}
.to_room .info .btn{
  height: 30px;
  color: white;
  background-color: green;
  opacity: .8;
  cursor: pointer;
}
.to_room .info .btn:hover{
  opacity: 1;
}
.to_room .room_password input{
  outline: none;
}
</style>